<!--
 * @Description: 混凝土三方检测审批
 * @Author: wangwangwang
 * @Date: 2020-11-30 11:57:21
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-01-08 16:44:26
-->
<template>
  <div class="flows-content">
    <el-container>
      <el-main style="margin-bottom: 20px; padding: 0;">
        <el-container direction="vertical">
          <FlowHeader :isReadOnly="readOnly" @saveSubmit="handleSubmit(1)" @sendSubmit="handleSubmit(2)" @handleBackEnd="handleSubmit(3)" @handleCC="handleSubmit(4)" @handleAssign="handleSubmit(5)" @handleBackUp="handleSubmit(6)" @handleAssist="handleSubmit(7)" @handleNode="handleSubmit(8)" @handleNodeImage="handleSubmit(9)" @handleCollection="handleSubmit(10)" />
          <el-main class="info">
            <div>
              <el-input v-model="title" class="flow-title" :disabled="$route.query.type*1!==1" placeholder="请输入流程标题"></el-input>
            </div>
            <div class="info-top">
              <div class="left">
                <span>单据号码：{{billCode}}</span>
                <span class="text">制单日期：{{billDate}}</span>
              </div>
              <div class="right">
                <span>发起人：{{applyPerson}}</span>
                <span class="text">状态：{{taskTypeText[taskStatus*1]}}</span>
              </div>
            </div>
            <div style="margin-top:20px;">
              <el-form :disabled="true" :inline="true" :model="formData" label-width="110px">
                <el-form-item prop="reportNo">
                  <span slot="label" style="color: #ff0000">报告编号</span>
                  <el-input v-model="formData.reportNo" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item prop="engineeringName">
                  <span slot="label">工程名称</span>
                  <el-input v-model="formData.engineeringName" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item prop="pouringPart">
                  <span slot="label">浇筑部位</span>
                  <el-input v-model="formData.pouringPart" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <!-- 生成产品名 -->
                <el-form-item>
                  <span slot="label" style="color: #ff0000">强度等级</span>
                  <div style="width:192px;">{{formData.strengthGrade?JSON.parse(formData.strengthGrade).map(item => item.name).join(','):''}}</div>
                </el-form-item>
                <el-form-item>
                  <span slot="label">规范性能等级</span>
                  <div style="width:192px;">{{formData.performanceGrade?JSON.parse(formData.performanceGrade).map(item => item.name).join(','):''}}</div>
                </el-form-item>
                <el-form-item>
                  <span slot="label">材料要求</span>
                  <div style="width:192px;">{{formData.meterialRequirements?JSON.parse(formData.meterialRequirements).map(item => item.name).join(','):''}}</div>
                </el-form-item>
                <el-form-item>
                  <span slot="label">特殊要求</span>
                  <div style="width:192px;">{{formData.specialRequirements?JSON.parse(formData.specialRequirements).map(item => item.name).join(','):''}}</div>
                </el-form-item>
                <el-form-item prop="engineeringName">
                  <span slot="label">其他要求</span>
                  <div style="width:192px;">{{formData.otherRequirements?JSON.parse(formData.otherRequirements).map(item => item.name).join(','):''}}</div>
                </el-form-item>
                <div>
                  <el-form-item prop="productName">
                    <span slot="label" style="color: #ff0000">产品名</span>
                    <el-input v-model="formData.productName" disabled style="width:500px"></el-input>
                  </el-form-item>
                </div>
                <el-form-item prop="inspectionTime">
                  <span slot="label">校验时间</span>
                  <el-date-picker v-model=" formData.inspectionTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                  </el-date-picker>
                </el-form-item>
                <el-form-item prop="inspectionUnit">
                  <span slot="label">校验单位</span>
                  <el-input v-model="formData.inspectionUnit" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item prop="inspectionResult">
                  <span slot="label">校验结果</span>
                  <el-select v-model="formData.inspectionResult" placeholder="请选择">
                    <el-option value="OK"></el-option>
                    <el-option value="NG"></el-option>
                  </el-select>
                </el-form-item>
                <div>
                  <el-form-item prop="company">
                    <span slot="label">公司</span>
                    <el-input v-model="formData.company" placeholder="请输入" clearable></el-input>
                  </el-form-item>
                </div>
                <el-form-item>
                  <span slot="label">校验报告</span>
                  <FileComponent :disabled="true" fileCode="contractFile" :files="formData.fileList" />
                </el-form-item>
              </el-form>
            </div>
            <div class="flows-details">
            <FlowContent ref="flowcontent" :title='title' :showSendVisible="showSendVisible" @handleCancel="handleCancel" @sendCode="sendCode" @handleFinish="handleFinish" @handleBusiness="handleBusiness"/>
            </div>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import FlowContent from '@/components/WorkFlow/flowContent';
import FileComponent from '@/components/File/fileComponent';
import FlowHeader from '@/components/WorkFlow/flowHeader';
import { getUserInfo } from "@/utils/auth.js";
export default {
  components: {
    FlowContent,
    FileComponent,
    FlowHeader,
  },
  data() {
    return {
      type: 0,
      title: '混凝土三方检测审批',
      billCode: '',
      billDate: '',
      applyPerson: '',
      taskTypeText: ['发起', '已保存', '审批中', '已完成', '撤销', '不通过'],
      taskStatus: 0,
      showSendVisible: false,
      readOnly: false,
      formData: {fileList: []},
      arr2: [],
      name1: '',
      name2: '',
      name3: '',
      name4: '',
      name5: '',
    }
  },
  methods: {
    handleBusiness () {
      const params = {
        process_success: {
          url: '/icps/system/sign/intelligent/tripleReport/beton/save_or_update_report',
          data: {...this.formData},
          httpMethod: 'post',
        },
        process_failure: ''
      }
      this.showSendVisible = false;
      this.$refs.flowcontent.handleToFlow(params);
    },
    /**
     * @Description: 
     * @Param: 1为保存，2为最后提交/3 中间提交
     * @Author: wangwangwang
     * @param {*} type
     */
    handleFinish() {
    },
    handleSubmit(type) {
      const { query } = this.$route;
      if (query.type * 1 === 2 && type === 2 && query.taskType*1 !== 2) { // 发起流程
        this.showSendVisible = true;
        return
      }
      const data = {
        dataSource: 'ThirdCheck2',
        dataContent: JSON.stringify({ ...this.formData }), // 业务数据
      }
      this.$refs.flowcontent.saveFlows(type, data);
    },
    handleFlowChat() {
      this.$refs.flowcontent.showFlowNode()
    },
    handleCancel() {
      this.showSendVisible = false;
    },
    /**
     * @Description: 回显业务数据
     * @Param: 
     * @Author: wangwangwang
     */
    initFlowsData(data) {
      this.formData = data;
      this.formData.fileList = JSON.parse(data.fileList);
    },
    initFlowsData2() {
      const { query } = this.$route;
      this.formData = JSON.parse(query.dataContent);
      this.title = query.taskName;
      this.billCode = query.receiptNumber;
      this.billDate = query.createTime;
      this.applyPerson = query.createUserName;
      this.taskStatus = query.taskStatus;
    },
    sendCode(code) {
      this.billCode = code;
    },
  },
  mounted() {
    const { query } = this.$route;
    if (query.type * 1 === 1) { // 发起流程
      this.initFlowsData(query);
      this.$refs.flowcontent.initBaseData('ThirdCheck2');
      this.billDate = new Date().Format('yyyy-MM-dd hh:mm:ss');
      this.applyPerson = getUserInfo().userRealName;
      return
    }
    this.initFlowsData2();
    if (query.isReadOnly*1===1) {
      this.readOnly = true;
    }
  }
}
</script>
<style lang="scss" scoped>
.flows-details {
  margin-top: 20px;
}
.info {
  padding: 0 20px;
  background: #fff;
  .info-top {
    font-size: $font_size;
    color: #000000;
    @include discen_al;
    justify-content: space-between;
    height: 50px;
    border-bottom: 1px #e1e5ed solid;
    .left {
      @include discen_al;
    }
    .text {
      margin-left: 60px;
    }
  }
}
.nav_title {
  @include discen_al;
  align-items: flex-end;
  > div {
    width: 4px;
    height: 24px;
    background: $bg_color;
    margin-right: 10px;
  }
  i {
    margin-left: 5px;
  }
  color: $bg_color;
  font-size: 20px;
  font-weight: bold;
}
</style>
